<template>
	<view class="viewBack">
		<view class="wrapCenter">
			<text class="textClass">全部团队</text>
			<u-icon name="photo" color="#2979ff" size="20"></u-icon>
		</view>
		<view class="chartsContent">

			<swiper :indicator-dots="true" class="swiperItems" indicator-active-color='#2979ff'>
				<swiper-item>
					<view class="charts-box">
						<qiun-data-charts @getIndex='getBox' style='height: 600rpx;' type="column"
							:chartData="chartsDataColumn1" :canvas2d="true" canvasId="swiperida" :inScrollView="true"
							:pageScrollTop="pageScrollTop" :enableMarkLine="true" :opts="optsConfig" />
					</view>
				</swiper-item>
				<swiper-item>
					<view class="charts-box">
						<qiun-data-charts type="column" :chartData="chartsDataColumn2" :canvas2d="true"
							:opts="{legend:{show:false}}" canvasId="swiperidb" :inScrollView="true"
							:pageScrollTop="pageScrollTop" />
					</view>
				</swiper-item>
				<swiper-item>
					<view class="charts-box">
						<qiun-data-charts type="column" :chartData="chartsDataColumn3" :canvas2d="true"
							:opts="{legend:{show:false}}" canvasId="swiperidc" :inScrollView="true"
							:pageScrollTop="pageScrollTop" />
					</view>
				</swiper-item>
			</swiper>

		</view>

		<view class="viewContent">
			<u-cell-group :border='false'>
				<u-cell value="接待统计" :border="false" isLink url="/pages/fieldStatistics/reception">
					<view slot="title" class="u-slot-title">

						<text class="text1">跟进情况</text>
						<text class="text2">(单位：组)</text>
						<u-icon class="text3" name="question-circle" color="#909399" size="16"></u-icon>

					</view>
				</u-cell>

			</u-cell-group>
			<view class="topt">
				<view class="centert">
					<text class="textLeft">来访</text>
					<text class="textRight" @click="goFollow">70</text>
				</view>
				<view class="centert">
					<text class="textLeft">来访</text>
					<text class="textRight">70</text>
				</view>
			</view>

			<view class="topt">
				<view class="centert">
					<text class="textLeft">来访</text>
					<text class="textRight">70</text>
				</view>
				<view class="centert">
					<text class="textLeft">来访</text>
					<text class="textRight">70</text>
				</view>
			</view>

			<view class="topt">
				<view class="centert">
					<text class="textLeft">来访</text>
					<text class="textRight">70</text>
				</view>
				<view class="centert">
					<text class="textLeft">来访</text>
					<text class="textRight">70</text>
				</view>
			</view>



		</view>


	</view>
</template>

<script>
	export default {

		data() {
			return {
				chartsDataColumn1: {},
				chartsDataColumn2: {},
				chartsDataColumn3: {},
				pageScrollTop: 0,
				optsConfig: {}
			}
		},
		created() {

			this.optsConfig = {
				"enableMarkLine": true,
				"legend": {
					show: false
				},
				"xAxis": {
					rotateLabel: true
					// format: 'xAjaxForm'
				},
				"extra": {
					"markLine": {
						"type": "solid",
						"dashLength": 4,
						"data": [{
							"value": 22,
							"lineColor": "#DE4A42",
							"showLabel": true,
							"labelFontColor": "#666666",
							"labelBgColor": "#DFE8FF",
							"labelBgOpacity": 0.8,
							"yAxisIndex": 0
						}]
					}
				}

			}
		},
		mounted() {
			console.log('3333333')
			//模拟从服务器获取数据
			this.getServerData()


		},


		onTabItemTap: function(e) {
			console.log('onTab', e);
			// e的返回格式为json对象： {"index":0,"text":"首页","pagePath":"pages/index/index"}
		},

		methods: {
			goFollow() {

				uni.navigateTo({
					url: '/pages/fieldStatistics/follow'
				});
			},
			getBox(e) {
				console.log(e)
				// alert(e.currentIndex.index)
			},
			getServerData() {
				setTimeout(() => {
					//因部分数据格式一样，这里不同图表引用同一数据源的话，需要深拷贝一下构造不同的对象
					//开发者需要自行处理服务器返回的数据，应与标准数据格式一致，注意series的data数值应为数字格式
					this.chartsDataColumn1 = {
						categories: ["2017-1-1", "2017-2-1", "2017-3-1", "2019-4-1", "2020-5-1", "2021-6-1",
							"年"
						],
						series: [{
							name: "",
							data: [35, 36, 31, 33, 13, 34, 100]
						}],

					}
					this.chartsDataColumn2 = {
						categories: ["2022", "2023", "2024", "2025", "2026", "2027"],
						series: [{
							name: "",
							data: [35, 36, 31, 33, 13, 34]
						}],

					}
					this.chartsDataColumn3 = {
						categories: ["2028", "2029", "2030", "2031", "2032", "2033"],
						series: [{
							name: "",
							data: [35, 36, 31, 33, 13, 34]
						}],

					}
				}, 1500);
			},

		}
	}
</script>

<style lang="scss" scoped>
	.viewContent {
		margin-top: 20rpx;
		background-color: #fff;

		.u-slot-title {
			display: flex;
			justify-content: flex-start;
			align-items: center;

			.text2 {
				color: #909399;
			}

		}

		.topt {
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 14px;
			padding: 0px 15px;
			padding-bottom: 20rpx;

			.centert {
				display: inline-flex;
				justify-content: space-between;
				align-items: center;

				.textLeft {

					color: $u-content-color;
				}

				.textRight {

					color: $u-primary;
				}
			}

		}
	}

	.wrapCenter {
		padding: 20rpx 20rpx;
		background: #fff;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;

		.textClass {
			font-size: 24rpx;
		}

		margin-bottom: 20rpx;

	}

	.chartsContent {
		padding: 20rpx;
		background: #fff;
	}

	.swiperItems {
		width: 100%;
		height: 330px;
	}

	.charts-box {
		width: 100%;
		height: 300px;
	}
</style>
